<template>
  <div class="fixed top-4 right-4 z-50 space-y-2 max-w-sm w-full">
    <TransitionGroup
      name="notification"
      tag="div"
      class="space-y-2"
    >
      <div
        v-for="notification in appStore.notifications.slice(0, 5)"
        :key="notification.id"
        :class="[
          'p-4 rounded-lg shadow-lg border backdrop-blur-sm transition-all duration-300',
          getNotificationClasses(notification.type)
        ]"
      >
        <div class="flex items-start space-x-3">
          <!-- Icon -->
          <div class="flex-shrink-0 mt-0.5">
            <component
              :is="getNotificationIcon(notification.type)"
              :class="[
                'w-5 h-5',
                getIconClasses(notification.type)
              ]"
            />
          </div>

          <!-- Content -->
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium">
              {{ notification.title }}
            </p>
            <p v-if="notification.message" class="text-sm mt-1 opacity-90">
              {{ notification.message }}
            </p>
            
            <!-- Action button -->
            <button
              v-if="notification.action"
              @click="handleAction(notification)"
              class="text-xs font-medium mt-2 hover:underline"
            >
              {{ notification.action.label }}
            </button>
          </div>

          <!-- Close button -->
          <button
            @click="appStore.removeNotification(notification.id)"
            class="flex-shrink-0 p-1 hover:bg-black hover:bg-opacity-10 rounded transition-colors"
          >
            <XMarkIcon class="w-4 h-4" />
          </button>
        </div>

        <!-- Progress bar for timed notifications -->
        <div
          v-if="!notification.persistent && notification.duration"
          class="mt-3 h-1 bg-black bg-opacity-20 rounded-full overflow-hidden"
        >
          <div
            class="h-full bg-current opacity-60 transition-all ease-linear"
            :style="{
              width: '100%',
              animation: `shrink ${notification.duration}ms linear`
            }"
          ></div>
        </div>
      </div>
    </TransitionGroup>
  </div>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store/app'
import type { Notification } from '@/types'

// Icons
import {
  CheckCircleIcon,
  ExclamationCircleIcon,
  ExclamationTriangleIcon,
  InformationCircleIcon,
  XMarkIcon
} from '@heroicons/vue/24/outline'

const appStore = useAppStore()

// Methods
const getNotificationClasses = (type: string) => {
  switch (type) {
    case 'success':
      return 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-200'
    case 'error':
      return 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200'
    case 'warning':
      return 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-200'
    case 'info':
    default:
      return 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200'
  }
}

const getIconClasses = (type: string) => {
  switch (type) {
    case 'success':
      return 'text-green-500 dark:text-green-400'
    case 'error':
      return 'text-red-500 dark:text-red-400'
    case 'warning':
      return 'text-yellow-500 dark:text-yellow-400'
    case 'info':
    default:
      return 'text-blue-500 dark:text-blue-400'
  }
}

const getNotificationIcon = (type: string) => {
  switch (type) {
    case 'success':
      return CheckCircleIcon
    case 'error':
      return ExclamationCircleIcon
    case 'warning':
      return ExclamationTriangleIcon
    case 'info':
    default:
      return InformationCircleIcon
  }
}

const handleAction = (notification: Notification) => {
  if (notification.action) {
    notification.action.handler()
    appStore.removeNotification(notification.id)
  }
}
</script>

<style scoped>
/* Notification transitions */
.notification-enter-active,
.notification-leave-active {
  transition: all 0.3s ease;
}

.notification-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.notification-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.notification-move {
  transition: transform 0.3s ease;
}

/* Progress bar animation */
@keyframes shrink {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}
</style>
